<!--
 * @Description: 插入SVG元素
-->

<template>
  <div style="display: inline-block">
    <button @click="insertImg">插入图片</button>
    <button @click="insertSvg">插入svg文件 </button>
    <button @click="insertSvgStr">插入svg字符</button>
    <input v-model="svgStr" type="textarea" />
  </div>
</template>

<script>
import { getImgStr, selectFiles } from '../utils/utils';
import select from '../mixins/select';
import { v4 as uuid } from 'uuid';

// 默认属性
const defaultPosition = {
  originX: 'left',
  originY: 'top',
};
export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
      showModal: false,
      svgStr: '',
    };
  },
  methods: {
    insertTypeHand(type) {
      this[type]();
    },
    // 插入图片
    insertImg() {
      selectFiles({ accept: 'image/*', multiple: true }).then((fileList) => {
        Array.from(fileList).forEach((item) => {
          getImgStr(item).then((file) => {
            this.insertImgFile(file);
          });
        });
      });
    },
    // 插入Svg
    insertSvg() {
      selectFiles({ accept: '.svg', multiple: true }).then((fileList) => {
        Array.from(fileList).forEach((item) => {
          getImgStr(item).then((file) => {
            this.insertSvgFile(file);
          });
        });
      });
    },
    // 插入SVG元素
    insertSvgStrModal() {
      this.svgStr = '';
      this.showModal = true;
    },
    // 插入图片文件
    insertImgFile(file) {
      const imgEl = document.createElement('img');
      imgEl.src = file || this.imgFile;
      // 插入页面
      document.body.appendChild(imgEl);
      imgEl.onload = () => {
        // 创建图片对象
        const imgInstance = new this.fabric.Image(imgEl, {
          ...defaultPosition,
          id: uuid(),
          name: '图片1',
          // left: 100,
          // top: 100,
        });
        // 设置缩放
        this.canvas.c.add(imgInstance);
        this.canvas.c.setActiveObject(imgInstance);
        this.canvas.c.renderAll();
        // 删除页面中的图片元素
        imgEl.remove();
      };
    },
    // 插入文件元素
    insertSvgFile(svgFile) {
      const This = this;
      this.fabric.loadSVGFromURL(svgFile || this.svgFile, (objects, options) => {
        const item = This.fabric.util.groupSVGElements(objects, {
          ...defaultPosition,
          ...options,
          name: 'defaultSVG',
          id: uuid(),
        });
        This.canvas.c.add(item)
          // .centerObject(item)
          .renderAll();
      });
    },
    // 插入字符串元素
    insertSvgStr() {
      const This = this;
      this.fabric.loadSVGFromString(this.svgStr, (objects, options) => {
        const item = This.fabric.util.groupSVGElements(objects, {
          ...defaultPosition,
          ...options,
          name: 'defaultSVG',
          id: uuid(),
        });
        This.canvas.c.add(item)
          // .centerObject(item)
          .renderAll();
      });
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.ivu-select-dropdown) {
  z-index: 999;
}
</style>
